<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // dom的事件绑定：将元素和外设进行反馈关联
        // 问题1：元素存在那些事件
        //       DOM对象的事件是由浏览器定义完成固定属性
        //       https://www.w3school.com.cn/jsref/dom_obj_event.asp
        //       click 鼠标点击事件 => 左键单击
        //       dbclick 鼠标双击
        // 问题2：如何绑定事件
        //      a. 通过标签的 on事件 属性进行绑定
        //          => 同名事件只能绑定一个，on事件属于事件属性的赋值
        //      b. 基于JS dom 对象事件绑定方法 addEventListener(eventName,callback) 完成
        //          => 获取被绑定事件的元素的DOM对象
        //          => 调用addEventListener 提供事件名称，事件回调方法
        //          => addEventListener 允许对相同事件名进行多次回调绑定

        function showTip1(){
            alert("提示框1111")
        }
        function showTip2(){
            alert("提示框2222")
        }
    </script>
</head>
<body>
    <!-- <h1 onclick="showTip1()" onclick="showTip2()" style="background-color: #dedede;">click</h1> -->
    <h1 onclick="showTip1()" oncontextmenu="showTip2()" style="background-color: #dedede;">click</h1>
    <input type="button" value="js事件绑定" id="btn1">


    <script>
        // 通过 addEventListener 绑定点击事件
        let btnDom1 = document.querySelector("#btn1");
        btnDom1.addEventListener("click",function(){
            alert("提示框1111")
        });
        btnDom1.addEventListener("click",function(){
            alert("提示框2222")
        });
        btnDom1.addEventListener("contextmenu",function(){
            alert("右键")
        });
    </script>
</body>
</html>